<template>
  <div>
    <header class="mc-header">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <div class="form-item-wrap">
          <el-form-item label="成员搜索">
            <el-input v-model="formInline.search_value" placeholder="请输入成员名称"></el-input>
          </el-form-item>
        </div>
        <div class="btn-wrap">
          <el-form-item>
            <el-button type="primary" @click="fetch">查询</el-button>
            <el-button @click="onClear">清空</el-button>
          </el-form-item>
        </div>
      </el-form>
    </header>
    <!-- 录入客户 -->

    <div class="input-btn">
      <el-button @click="massDistribution">批量移出</el-button>
      <el-button type="primary" @click="addyaungong">添加员工</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" stripe @selection-change="handleSelectionChange" header-row-class-name="table_header_title">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="mobile" label="企业成员" width="200">
        <template #default="scope">
          <div class="explicit-wrap" @click="scope.row.isShow = !scope.row.isShow">
            手机：
            <img width="14" height="10" src="@/assets/customer/eye.png" v-show="scope.row.isShow" alt="" />
            <span v-show="!scope.row.isShow">{{ scope.row.mobile }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="所在部门" width="200">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="角色">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button @click.prevent="handReassign(scope.row)"> 移出门店 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分配员工 -->
    <ZWDepart ref="ZWDepartDom" @submit="submit" />
    <!-- 分页 -->
    <div class="page-container">
      <div class="left-total">
        共 <span>{{ pageInfo.total }}</span> 条
      </div>
      <ZWPagination ref="PaginationRef" @submit="page" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import ZWDepart from '@/components/ZWDepart.vue'
import ZWPagination from '@/components/ZWPagination.vue'
import { getCustList, distributionFile } from '@/api/customer'
import { getstafflist, getstaffdel } from '@/api/employe/storemanagement/sensitiveWord'

import { getSetionId } from '@/utils/utils'

import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useStore } from '@/store'
import { ElMessage } from 'element-plus'

const store = useStore()

const ZWDepartDom = ref(null)

const props = defineProps({
  id: String
})
const formInline = reactive({
  search_value: '',
  store_id: props.id // 门店id
})
let pageInfo = reactive({
  page_size: 15,
  page: 1,
  total: 0
})

const tableData = ref([])
// 分页信息
const page = (page: any) => {
  pageInfo.page_size = page.page_size
  pageInfo.page = page.page
}
// 表格多选
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const filterTag = (e: any) => {
  console.log('filterTag', e)
}

// 获取员工数据
const departInfo = computed(() => {
  return store.getters['content/depart']
})
// 员工所属部门或者客户
let creators = ref([])
const formData: {
  customer_list: number[]
  work_user_list: number[]
} = reactive({
  customer_list: [], // 客户ID
  work_user_list: [] // 员工ID
})
// 员工信息
watch(departInfo, (depart) => {
  creators.value = depart.creaters
  formData.work_user_list = getSetionId('id', depart.creaters)
})

const submit = () => {
  ZWDepartDom.value.isInit = true
  // console.log('submit-----ZWDepart------submit')
  if (formData.customer_list && formData.work_user_list) {
    distributionFile(formData).then((res: any) => {
      // console.log(res)
      // console.log('-------------------------submit-----------------')
      ElMessage.success('分配成功')
      fetch()
    })
  }
}

const handReassign = (e: any) => {
  store.dispatch('content/depart', {
    title: '再次分配',
    creaters: creators,
    departVisble: true
  })
  formData.customer_list = [e.id]
}
// 批量分配
const massDistribution = () => {
  // console.log(multipleSelection.value, 'multipleSelection')
  if (multipleSelection.value.length <= 0) {
    ElMessage.error('请至少选择1项')
  } else {
    console.log(multipleSelection.value, 'multipleSelection')
    formData.customer_list = multipleSelection.value.map((v) => v.id)
    console.log(formData, 'formDataformDataformData')
    // store.dispatch('content/depart', {
    //   title: '再次分配',
    //   creaters: creators,
    //   departVisble: true
    // })
    // console.log(formData, 'formDataformDataformData')
  }
}
// 查询列表
const fetch = () => {
  getstafflist({
    ...pageInfo,
    ...formInline
  }).then((res: any) => {
    console.log(res, 'getstafflist')
    // res.data.forEach((item: any) => {
    //   item.isShow = true
    // })
    tableData.value = res.data
    pageInfo.total = res.total
    store.dispatch('pageTotal', res.total)
  })
}
const pageType = reactive({
  type: 0,
  isCheck: false,
  list: [
    { type: 0, name: '当前页' },
    { type: 1, name: '全部页' }
  ]
})
onMounted(() => {
  fetch()
})

const onClear = () => {
  ;(formInline.apply_status = '-1'), (formInline.mobile_or_name = ''), fetch()
}
</script>

<style scoped lang="scss">
.select-box {
  padding: 0 9px;
  border: 1px solid #eaeaea;
  background: #f9f9f9;
  border-radius: 1px;
  margin-right: 28px;
  :deep .el-input__inner {
    border: none;
    background: #f9f9f9;
  }
}
.input-btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
  .el-button {
    margin-right: 30px;
  }
}
.mc-header {
  background-color: #f9f9f9;
  height: 56px;
  width: 100%;
  margin-top: 10px;
  .form-inline {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    .el-form-item {
      margin-bottom: 0;
      padding: 0 18px;
    }
    display: flex;
    align-items: center;
  }
}

.page-container {
  display: flex;
  align-items: center;
  .left-total {
    display: flex;
    span {
      color: #ff6b00;
      font-weight: 500;
      padding: 0 10px;
    }
  }
}

.tags_con {
  margin: auto;
  width: 100%;
  align-items: center;
  display: flex;
  .tags_box {
    text-align: left;
    flex: 1;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .tag_total {
    // flex: 1;
    span {
      color: #ff6b00;
    }
  }
}
.img {
  width: 80px;
}

.table_tag {
  display: inline-block;
  color: #969696;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #eaeaea;
  margin: 5px;
}
.high_light {
  border: 1px solid #ff6b00;
  color: #ff6b00;
}

.table_tag_con {
  display: flex;
  align-items: center;
}

.explicit-wrap {
  cursor: pointer;
}
</style>
